<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>jsForms - Tutorials</title>
	</head>
	<body>
<h1>Структура проекта</h1>
<ul><li>[DIR] css - стили</li>
<li>[DIR] images - картинки</li>
<li>[DIR] scripts - скрипты
<ul><li>[DIR] components - функциональная часть компонентов
<ul><li>blank.js</li>
<li>button.js</li></ul></li>
<li>[DIR] engine - jQuery, jsForms
<ul><li>jquery-1.2.6.js</li>
<li>jsForms.js</li></ul></li>
<li>[DIR] plugins - плагины для jQuery</li>
<li>[DIR] templates - визуальнпя часть компонентов
<ul><li>blank.js</li>
<li>button.js</li></ul></li>
<li>blankPage.js - скрипт инициализации страницы blank.html</li>
<li>page1.js</li>
<li>page2.js</li>
<li>e.t.c.</li></ul>
</li>
<li>blank.html - страница</li>
<li>page1.html</li>
<li>page2.html</li>
<li>e.t.c.</li></ul>
<h1>Установка jsForms</h1>
Код blank.html:
<blockquote><code><font size="2" face="Courier New" color="black"><font color="#0000ff">&#60;!</font><font color="#800000">DOCTYPE</font> <font color="#ff0000">html</font> <font color="#ff0000">PUBLIC</font> <font color="#0000ff">"-//W3C//DTD XHTML 1.0 Strict//EN"</font> <font color="#0000ff">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;</font><font color="#800000">html</font> <font color="#ff0000">xmlns</font><font color="#0000ff">="http://www.w3.org/1999/xhtml"</font> <font color="#ff0000">xml:lang</font><font color="#0000ff">="en"</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;</font><font color="#800000">head</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;</font><font color="#800000">meta</font> <font color="#ff0000">http-equiv</font><font color="#0000ff">="content-type"</font> <font color="#ff0000">content</font><font color="#0000ff">="text/html; charset=utf-8"</font> <font color="#0000ff">/&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;</font><font color="#800000">title</font><font color="#0000ff">&#62;</font>Blank - jsForms - exapmle<font color="#0000ff">&#60;/</font><font color="#800000">title</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font class="rem">&#60;!-- CSS --&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;</font><font color="#800000">link</font> <font color="#ff0000">media</font><font color="#0000ff">="screen"</font> <font color="#ff0000">type</font><font color="#0000ff">="text/css"</font> <font color="#ff0000">href</font><font color="#0000ff">="css/blank.css"</font> <font color="#ff0000">rel</font><font color="#0000ff">="stylesheet"</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;</font><font color="#800000">link</font> <font color="#ff0000">media</font><font color="#0000ff">="screen"</font> <font color="#ff0000">type</font><font color="#0000ff">="text/css"</font> <font color="#ff0000">href</font><font color="#0000ff">="css/button.css"</font> <font color="#ff0000">rel</font><font color="#0000ff">="stylesheet"</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font class="rem">&#60;!-- Engine --&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;</font><font color="#800000">script</font> <font color="#ff0000">type</font><font color="#0000ff">="text/javascript"</font> <font color="#ff0000">src</font><font color="#0000ff">="scripts/engine/jquery-1.2.6.js"</font><font color="#0000ff">&#62;&#60;/</font><font color="#800000">script</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;script type=<font color="#A31515">"text/javascript"</font> src=<font color="#A31515">"scripts/engine/jsForms.js"</font>&#62;&#60;/script&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;!-- Plugins --&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;script type=<font color="#A31515">"text/javascript"</font> src=<font color="#A31515">"scripts/plugins/ui/jquery.ui.all.packed.js"</font>&#62;&#60;/script&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;!-- Components --&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;!-- Templates --&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;script type=<font color="#A31515">"text/javascript"</font> src=<font color="#A31515">"scripts/templates/blank.js"</font>&#62;&#60;/script&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;!-- js Classes --&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;script type=<font color="#A31515">"text/javascript"</font> src=<font color="#A31515">"scripts/components/blank.js"</font>&#62;&#60;/script&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;!-- page --&#62;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#60;script type=<font color="#A31515">"text/javascript"</font> src=<font color="#A31515">"scripts/blankPage.js"</font>&#62;<font color="#0000ff">&#60;/</font><font color="#800000">script</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;/</font><font color="#800000">head</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;</font><font color="#800000">body</font><font color="#0000ff">&#62;</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#0000ff">&#60;/</font><font color="#800000">body</font><font color="#0000ff">&#62;</font><br><font color="#0000ff">&#60;/</font><font color="#800000">html</font><font color="#0000ff">&#62;</font><br></font><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
Код blankPage.js:
<blockquote><code><font size="2" face="Courier New" color="black"><font color="#008000">//</font><br><font color="#008000">// Page load</font><br><font color="#008000">//</font><br><font color="#0000ff">if</font> (window.console == undefined) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console = {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;log:<font color="#0000ff">function</font>(){},<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;error:<font color="#0000ff">function</font>(){}<br>&nbsp;&nbsp;&nbsp;&nbsp;};<br>}<br><font color="#0000ff">function</font> loadPage()<br>{<br>&nbsp;&nbsp;&nbsp;&nbsp;jsForms.CreateComponent(<font color="#A31515">'Blank'</font>).hide().appendTo(<font color="#0000ff">document</font>.body).Init().show();<br>};<br><br>$(<font color="#0000ff">document</font>).ready(loadPage);</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
Создадим пустой Blank компонент:
<blockquote><code><font size="2" face="Courier New" color="black"><font color="#008000">// blank.js - "class"</font><br>jsForms.Components.Blank ={};<br><font color="#008000">// blank.js - template</font><br>jsForms.Templates.Blank = <font color="#A31515">'&#60;div/&#62;'</font>;</font><br><br><font size="1" color="gray">* This source code was highlighted with <a href="http://virtser.net/blog/post/source-code-highlighter.aspx"><font size="1" color="gray">Source Code Highlighter</font></a>.</font></code></blockquote>
<h1>Использование <a target="_blank" href="http://www.jsforms.com/jsForms_editor.html" class="editorlink">Component-Editor</a></h1>
<h2>Загрузка компонентов</h2>
<center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="903" HEIGHT="597" 
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0,0,0">
<PARAM NAME=movie VALUE="swf/LoadComponent.swf">
<PARAM NAME=play VALUE=false>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=quality VALUE=low>
<EMBED SRC="swf/LoadComponent.swf" WIDTH=903 HEIGHT=597 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT></center>
<h2>Редактирование</h2>
<h4>Ручное редактирование template</h4>
<center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="903" HEIGHT="597" 
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0,0,0">
<PARAM NAME=movie VALUE="swf/SimpleSourceEditor.swf">
<PARAM NAME=play VALUE=false>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=quality VALUE=low>
<EMBED SRC="swf/SimpleSourceEditor.swf" WIDTH=903 HEIGHT=597 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT></center>
<h4>DOM инспектор</h4>
Перемещение, добавление и удаление объектов
<center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="903" HEIGHT="597" 
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0,0,0">
<PARAM NAME=movie VALUE="swf/DOM_move_insert_delete.swf">
<PARAM NAME=play VALUE=false>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=quality VALUE=low>
<EMBED SRC="swf/DOM_move_insert_delete.swf" WIDTH=903 HEIGHT=597 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT></center>
<h4>Стили</h4>
<center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="903" HEIGHT="597" 
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0,0,0">
<PARAM NAME=movie VALUE="swf/CSS.swf">
<PARAM NAME=play VALUE=false>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=quality VALUE=low>
<EMBED SRC="swf/CSS.swf" WIDTH=903 HEIGHT=597 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT></center>
<h4>Свойства и события</h4>
<center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="903" HEIGHT="597" 
CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0,0,0">
<PARAM NAME=movie VALUE="swf/PropertyEvent.swf">
<PARAM NAME=play VALUE=false>
<PARAM NAME=loop VALUE=false>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=quality VALUE=low>
<EMBED SRC="swf/PropertyEvent.swf" WIDTH=903 HEIGHT=597 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT></center>
 <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6331922-1");
pageTracker._trackPageview();
} catch(err) {}</script>
	</body>
</html>
